<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <div v-if="model=='show'">
            <button @click="doadd">添加</button>
            <button @click="delAll">批量删除</button>
            <table border="1px">
                <tr>
                    <td><input type="checkbox" v-model="checkAll" @click="tocheckAll"></td>
                    <th>编号</th>
                    <th>职务名称</th>
                    <th>所属部门</th>
                    <th>操作</th>
                </tr>
                <tr v-for="n in tableDate">
                    <td><input type="checkbox" v-model="ids" :value="n.id"></td>
                    <td>{{n.jid}}</td>
                    <td>{{n.jname}}</td>
                    <td>{{n.dname}}</td>
                    <td>
                        <button @click="toEdit(n)">修改</button>
                        <button @click="del(n.jid)">删除</button>
                    </td>
                </tr>
            </table>
            {{pageInfo.pageNum}}/{{pageInfo.pages}}
            <button @click="goPage(1)">首页</button>
            <button @click="goPage(pageInfo.pageNum-1)">上一页</button>
            <button @click="goPage(pageInfo.pageNum+1)">下一页</button>
            <button @click="goPage(pageInfo.pages)">尾页</button>
            <select v-model="query.size">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
        </div>
        <div v-if="model=='add'">
            职务名称: <input type="text" v-model="from.jname"></br>
            所属部门: <input type="text" v-model="from.dname"></br>
            <button @click="initFormDate">取消</button>
            <button @click="addjob">提交</button>
        </div>
        <div v-if="model=='edit'">
            职务名称: <input type="text" v-model="from.jname"></br>
            所属部门: <input type="text" v-model="from.dname"></br>
            <button @click="initFormDate">取消</button>
            <button @click="editjob">提交</button>
        </div>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            ids:[],
            checkAll:false,
            model:"show",
            tableDate:{},
            pageInfo:{},
            from:{
                name:"",
                age:"",
                address:"",
                phone:"",
            },
            query:{
                age1:"",
                age2:"",
                name:"",
                page:1,
                size:2,
            }
        },
        watch:{
            query: {
                deep:true,
                handler(){
                    this.initDate();
                }
            },
            ids(newValue,oldValue){
              if(newValue.length==this.tableDate.length&&this.tableDate.length>0){
                  this.checkAll=true;
              }else {
                    this.checkAll=false;
              }
            }
        },
        methods:{
            delAll(){
              if (this.ids.length>0){
                  var ids=this.ids.join(",");
                  if (confirm("是否确认删除?")){
                      axios.post(`/job/delAll.do?ids=${ids}`).then(res=>{
                          this.initDate();
                      })
                  }
              }
            },
            tocheckAll(){
                if (this.checkAll){
                this.ids=[];
                }else {
                    this.ids=this.tableDate.map(e=>e.id)
                }
            },
            del(id){
                if (confirm("是否确认删除?")){
                    axios.post(`/job/del?id=${id}`).then(res=>{
                        this.initDate();
                    })
                }

            },
            editjob(){
                axios.post(`/job/etid`,this.from).then(res=>{
                    this.initFormDate();
                    this.initDate();
                })
            },
            toEdit(n){
                this.from= JSON.parse(JSON.stringify(n));
                this.model='edit'
            },
            addjob(){
                axios.post(`/job/add`,this.from).then(res=>{
                    this.initFormDate();
                    this.initDate();
                })
            },
            initFormDate(){
                this.model='show';
                this.from={
                    name:"",
                        age:"",
                        address:"",
                        phone:"",
                }
            },
            doadd(){
                this.model='add'
            },
            goPage(p){
              if (p<1){
                  p=1;
              }
              if (p>this.pageInfo.pages){
                  p=this.pageInfo.pages;
              }
              this.query.page=p;
              this.initDate();
            },
            initDate(){
                var parm = this.query;
                axios.post('/job/findAll',parm).then(res=>{
                    this.pageInfo=res.data;
                    this.tableDate=res.data.list;

                    if (this.tableDate.length==0 &&this.query.page>1){
                        this.query.page--;
                    }
                    this.checkAll=false;
                    this.ids=[];
                })
            }
        },
        created(){
            this.initDate();
        }
    })
</script>
</html>
